<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>
    <el-button type="text" @click="openChapterDialog()">添加章节</el-button>
    <!-- 章节 -->
    <ul class="chanpterList">
      <li
        v-for="chapter in chapterList"
        :key="chapter.id">
        <p>
          {{ chapter.title }}

          <span class="acts">
                    <el-button style="" type="text" @click="openVideo(chapter.id)">添加课时</el-button>
                    <el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
                    <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
                </span>
        </p>

        <!-- 课时 -->
        <ul class="chanpterList videoList">
          <li
            v-for="video in chapter.children"
            :key="video.id">
            <p>{{ video.title }}

              <span class="acts">

                    <el-button style="" type="text" @click="openEditVideo(video.id)">编辑</el-button>
                    <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <div>
      <el-button @click="previous">上一步</el-button>
      <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
    </div>

    <!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
        </el-form-item>
        <el-form-item label="免费试听">
          <el-radio-group v-model="video.free">
            <el-radio :label="true">免费</el-radio>
            <el-radio :label="false">付费</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API+'/vod/video/upload'"
            :limit="1"
            class="upload-demo">
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import chapter from "@/api/teach/chapter";
  import video from "@/api/teach/video";
  import vod from "@/api/teach/vod";

  export default {
    data() {
      return {
        saveBtnDisabled: false, // 保存按钮是否禁用
        courseId: 0,//课程id
        chapterList: [],//章节列表
        chapter: {
          title: '',//章节标题
          sort: 0,//章节排序
          courseId: '',//课程id
        },//章节对象
        dialogChapterFormVisible: false,//章节表单是否显示
        dialogVideoFormVisible: false,//小节表单是否显示
        video: {
          id: '',//课时id
          courseId: '',//课程id
          title: '',//小节标题
          sort: 0,//排序
          free: true,//是否可以试听
          chapterId: '',//章节id
          videoSourceId: '',//视频id
          videoOriginalName: '',//视频名称
        },//小节对象
        saveVideoBtnDisabled: false,//保存按钮是否禁用
        chapterId: '',//课时所在章节id
        fileList: [],//上传文件列表
        BASE_API: process.env.BASE_API,//后端接口地址
      }
    },
    created() {
      this.init()
    },
    methods: {
      //=====================视频====================
      //上传视频成功调用的方法
      handleVodUploadSuccess(response, file, fileList) {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.video.videoSourceId = response.data.videoId
        this.video.videoOriginalName = file.name
      },
      //删除视频
      handleVodRemove(file, fileList) {
        vod.deleteVideo(this.video.videoSourceId)
          .then(response => {
            this.video.videoSourceId = ''//清空视频id
            this.video.videoOriginalName = ''//清空视频名称
            this.fileList = []//清空文件列表
            this.$message({
              type: 'success',
              message: response.message
            })
          })
      },
      //删除视频之前
      beforeVodRemove(file, fileList) {
        return this.$confirm(`确定移除视频${file.name}吗？`)
      },
      //上传之前-上传多于一个文件
      handleUploadExceed(file, fileList) {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
      //================小节操作======================

      //打开编辑课时弹框
      openEditVideo(videoId) {
        this.dialogVideoFormVisible = true//打开弹框
        this.saveVideoBtnDisabled = false;//保存按钮不禁用
        //根据id查询课时信息
        video.getVideo(videoId)
          .then(response => {
            //获取返回信息
            this.video = response.data.video
            this.fileList = [{'name': this.video.videoOriginalName}]
          })
      },
      //删除小节
      removeVideo(videoId) {
        //弹框提示
        this.$confirm('此操作将永久删除该课时, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确定调用
          video.removeVideoById(videoId)
            .then(response => {//删除成功
              this.$message({
                type: 'success',
                message: response.message
              });
              //刷新页面
              this.getChapterAndVideo()

            })
            .catch(response => {//删除失败
              this.$message({
                type: 'error',
                message: response.message
              })
            })

        }).catch(() => {//点击取消调用
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //保存小节
      saveOrUpdateVideo() {

        //判断是添加还是修改-根据video对象中是否有id
        if (!this.video.id) {//没有id
          //修改
          this.saveVideo()
        } else {
          //修改
          this.updateVideo()
        }
      },
      //修改课时
      updateVideo() {
        this.saveVideoBtnDisabled = true;//禁用保存按钮
        //调用api接口方法
        video.editVideo(this.video)
          .then(response => {//修改成功
            //提示
            this.$message({
              type: 'success',
              message: response.message
            });
            //重置
            this.reset()
          })
      },
      //添加课时
      saveVideo() {
        this.saveVideoBtnDisabled = true;//禁用保存按钮
        //调用api接口方法
        video.addVideo(this.video)
          .then(response => {//添加成功
            //提示
            this.$message({
              type: 'success',
              message: response.message
            });
            //重置
            this.reset()
          })
      },
      //重置添加课时弹框
      reset() {
        this.dialogVideoFormVisible = false;//关闭弹框
        this.video.title = '';//重置课时标题
        this.video.sort = 0;//重置排序
        this.video.free = true;//重置是否免费
        this.video.chapterId = '';//重置章节id
        //保存按钮不禁用
        this.video.videoSourceId='';//重置视频id
        this.saveVideoBtnDisabled = false
        this.getChapterAndVideo();//刷新页面
      },
      //弹出添加小节弹框
      openVideo(chapterId) {
        this.dialogVideoFormVisible = true
        this.video.title = '';//重置课时标题
        this.video.sort = 0;//重置课时排序
        this.video.chapterId = chapterId;//设置章节id
        this.video.courseId = this.courseId; //设置课程id
        this.video.free = true;//设置课程是否可以试听
      },

      //=========================章节操作=====================
      //删除章节
      removeChapter(chapterId) {
        //弹框提示
        this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确定调用
          chapter.removeChapterById(chapterId)
            .then(response => {//删除成功
              this.$message({
                type: 'success',
                message: response.message
              });
              //刷新页面
              this.getChapterAndVideo()

            })
            .catch(response => {//删除失败
              this.$message({
                type: 'error',
                message: '该章节下尚有小节,不能删除！'
              })
            })

        }).catch(() => {//点击取消调用
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //点击编辑打开编辑弹框
      openEditChapter(chapterId) {
        this.dialogChapterFormVisible = true;
        //查询章节信息
        chapter.getChapterById(chapterId)
          .then(response => {
              //获取数据
              this.chapter = response.data.chapter
            }
          )
      },
      //保存
      saveOrUpdate() {
        this.saveBtnDisabled = false
        if (!this.chapter.id) {
          //添加
          this.saveChapter()
        } else {
          //修改
          this.updateChapterById()
        }
      },
      //添加章节
      saveChapter() {
        //设置课程id
        this.chapter.courseId = this.courseId
        //调用api方法
        chapter.saveChapter(this.chapter)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: response.message
            })
            //关闭表单
            this.dialogChapterFormVisible = false
            //刷新列表
            this.getChapterAndVideo()
            //重置标题
            this.chapter.title = ''
            //重置排序
            this.chapter.sort = 0
            //保存按钮不禁用
            this.saveBtnDisabled = false
          })
          .catch(response => {
            //提示
            this.$message({
              type: 'error',
              message: response.message
            })
          })
      },
      //修改章节
      updateChapterById() {
        //设置课程id
        this.chapter.courseId = this.courseId
        //调用api方法
        chapter.updateChapter(this.chapter)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: response.message
            })
            //关闭表单
            this.dialogChapterFormVisible = false
            //刷新列表
            this.getChapterAndVideo()
            //重置标题
            this.chapter.title = ''
            //重置排序
            this.chapter.sort = 0
            //保存按钮不禁用
            this.saveBtnDisabled = false
          })
          .catch(response => {
            //提示
            this.$message({
              type: 'error',
              message: response.message
            })
          })
      },

      //===============页面操作===================
      //根据课程id获取章节小节信息
      getChapterAndVideo() {
        chapter.queryChapterVideo(this.courseId)
          .then(response => {
            this.chapterList = response.data.chapterVoList
          })
      },
      //初始化页面
      init() {
        //判断路径是否有值
        if (this.$route.params && this.$route.params.id) {
          //获取id值
          this.courseId = this.$route.params.id
          //查询章节小节信息
          this.getChapterAndVideo()
        }
      },
      //弹出添加章节表单
      openChapterDialog() {
        this.dialogChapterFormVisible = true
        this.chapter.title = ''
        this.chapter.sort = 0
      },
      //上一步
      previous() {
        console.log('previous')
        this.$router.push({path: '/teach/course/info/' + this.courseId})
      },
      //下一步
      next() {
        console.log('next')
        this.$router.push({path: '/teach/course/publish/' + this.courseId})
      }
    }
  }
</script>
<style scoped>
  .chanpterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chanpterList li {
    position: relative;
  }

  .chanpterList p {
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }

  .chanpterList .acts {
    float: right;
    font-size: 14px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }

</style>
